<template>
  <div class="max">
    <div class="max_left">
      <!-- 企业信息 -->
      <div class="maxleftbox"
           id="top1">
        <div class="maxleft_title">
          企业信息
          <i>适用于企业，个体工商户，事业单位等，通过营业执照，组织机构代码等相关资质进行认证</i>
        </div>
        <div class="maxleft_title1">
          <a-row>
            <a-col :span="12"><span>企业简称： <i>{{ enterpriseInformationArr.shortName }}</i></span></a-col>
            <a-col :span="12"><span>企业名称： <i>{{ enterpriseInformationArr.name }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="12"><span>企业类型：
                <i>{{ enterpriseInformationArr.entTypeName }}</i></span></a-col>
            <a-col :span="12"><span>法定代表人：
                <i>{{ enterpriseInformationArr.legalPerson }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="12"><span>营业期限：
                <i>{{ enterpriseInformationArr.termStart }} -
                  {{ enterpriseInformationArr.termEnd }}</i></span></a-col>
            <a-col :span="12"><span>注册资本（万）
                <i>{{ enterpriseInformationArr.regCapital }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="12"><span>成立日期：
                <i>{{ enterpriseInformationArr.foundDate }}</i></span></a-col>
            <a-col :span="12"><span>注册国家/地区：
                <i>{{ enterpriseInformationArr.province }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="24"><span>注册地址： <i>{{ enterpriseInformationArr.address }}</i></span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24"
                   style="position: relative; padding-top: 5px;">
              <span style="position: absolute; top: -1px">经营范围</span>
              <i class="scope">{{ enterpriseInformationArr.scope }}</i>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12"
                   v-if="currentType === 2">
              <span>经营品牌： <i>{{ enterpriseInformationArr.brand }}</i></span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <span>法人联系方式： </span><i style="font-style: normal;font-size:12px">{{ enterpriseInformationArr.legalPersonMobile }}</i>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24"
                   class="previewUrl-id">
              <span>法人身份证：</span>
              <div @click="$imagePreview(previewUrl + form.idCardFrontPicId)">
                <div><img class="uppload-image"
                       :src="previewUrl + form.idCardFrontPicId"
                       alt="文件丢失，请重新上传" />
                </div>
                <p>头像面</p>
              </div>
              <div @click="$imagePreview(previewUrl + form.idCardBackPicId)">
                <div><img class="uppload-image"
                       :src="previewUrl + form.idCardBackPicId"
                       alt="文件丢失，请重新上传" />
                </div>
                <p>国徽面</p>
              </div>
              <div @click="$imagePreview(previewUrl + form.businessLicensePicId)">
                <div><img class="uppload-image"
                       :src="previewUrl + form.businessLicensePicId"
                       alt="文件丢失，请重新上传" />
                </div>
                <p>法人营业执照</p>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <!-- 业务信息 -->
      <div class="maxleftbox max_logo"
           id="top2"
           v-if="currentType === 3">
        <div class="maxleft_title">
          业务信息
          <i>提示：业务信息将会出现在您的首页上，丰富的内容将有助于提高您的资质，便于更多企业快速阅览，促进交易</i>
        </div>
        <div class="maxleft_title1">
          <a-row>
            <a-col :span="8"><span>组织类型： <i>{{form.orgTypeName}}</i></span></a-col>
            <a-col :span="8"><span>公司logo：
                <a href="链接的页面"
                   target="_blank"
                   style="color: #3b82ff; cursor: pointer">查看图片</a><br />
              </span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>主营品类： <i>{{form.masterCategory}}</i></span></a-col>
            <a-col :span="8"><span>主营品类： <i>{{form.assistCategory}}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>送货范围： <i>{{deliveries}} </i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>公司简介： <i>{{form.introduction}}</i></span></a-col>
          </a-row>
        </div>
      </div>
      <!-- 联系人信息 -->
      <div class="maxleftbox"
           id="top3">
        <div class="maxleft_title">
          联系人信息
          <i>提示：真实的联系人信息便于合作企业快速联系您，至少需要维护一条默认联系人</i>
        </div>
        <div class="maxleftbox_box">
          <div class="box_li"
               v-for="(item, index) in form.tenantContacts"
               :key="index">
            <div class="box_litop">
              <div class="box_litop_left">
                <p>{{ item.contactName }}</p>
                <p>{{ item.contactMobile }}</p>
              </div>
            </div>
            <div class="box_bottom">
              <div class="bottom_left"
                   style="width：100%">
                <p>
                  邮箱：<span>{{ item.contactEmail }}</span>
                </p>
                <p>
                  系统消息：<span> 接收</span>
                </p>
                <p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:280px">
                  地址：<span>{{item.province}} {{item.city}} {{item.district}} {{item.street}} {{item.detailAddr}}</span>
                </p>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!-- 地址 -->
      <div class="maxleftbox"
           id="top4">
        <div class="maxleft_title">
          地址
          <i>提示：您的企业可能在多地拥有工厂/公司，建议维护完整信息，展示贵司规模。</i>
        </div>
        <div class="maxleftbox_box">
          <div class="box_li"
               style="height: 134px"
               v-for="(item, index) in form.tenantAddresses"
               :key="index">
            <div class="box_litop"
                 style="height: 64px">
              <div class="box_litop_dress">
                <p>
                  {{ item.province }} {{ item.city }} {{ item.district }}
                  {{ item.street }} {{ item.detailAddr }}
                </p>
              </div>
              <!-- <div class="box_litop_right" style="margin-top:0px"> 15920365421</div> -->
            </div>
            <div class="box_bottom">
              <div class="bottom_left">
                <div class="bottom_left">
                  <p class="addressbz">地址备注：{{ item.comment }}</p>
                  <p>
                    邮政编码：<span>{{ item.postCode }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 银行卡信息 -->
      <div class="maxleftbox"
           id="top5"
           v-if="this.currentType === 3">
        <div class="maxleft_title">
          银行卡信息
          <i>提示：维护账号信息，后续您向合作企业提供付款账号时，可快速复制。</i>
        </div>
        <div class="maxleftbox_box">
          <div class="box_li"
               style="height: 120px"
               v-for="(item, index) in form.tenantBanks"
               :key="index">
            <div class="box_litop"
                 style="
                height: 46px;
                padding: 14px 0;
                color: #333;
                line-height: 17px;
              ">
              <div class="box_litop_left">
                <p>{{ item.bankName }}</p>
              </div>
              <div class="box_litop_right"
                   style="
                  margin-top: 0px;
                  font-family: PingFangSC, PingFangSC-Medium;
                  font-weight: 500;
                ">
                尾号{{ item.tail }}
              </div>
            </div>
            <div class="box_bottom">
              <div class="bottom_left">
                <p>
                  开户行：<span>{{ item.account }}</span>
                </p>
                <p>
                  帐号名称：<span>{{ item.accountName }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 开票信息 -->
      <div class="maxleftbox max_logo"
           id="top6">
        <div class="maxleft_title">
          开票信息
          <i>非常重要：开票信息要保证发票真实有效，请维护准确完整的开票信息。</i>
        </div>
        <div class="maxleft_title1 invoice-info"
             style="padding-top:20px;padding-bottom:20px">
          <a-row>
            <a-col :span="8"><span>发票抬头： <i>{{ tenantInvoice.title }}</i></span></a-col>
            <a-col :span="8"><span>税务登记地址： <i>{{ tenantInvoice.taxRegAddr }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>税务登记号： <i>{{ tenantInvoice.taxRegNo }} </i></span></a-col>
            <a-col :span="8"><span>税务登记电话： <i>{{ tenantInvoice.taxRegTel }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>开户行： <i>{{ tenantInvoice.bankAccount }}</i></span></a-col>
            <a-col :span="8"><span>收票人邮箱： <i>{{ tenantInvoice.acceptEmail }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8"><span>开户行帐号： <i>{{ tenantInvoice.accountName }}</i></span></a-col>
            <a-col :span="8"><span>收票人手机号： <i>{{ tenantInvoice.acceptMobile }}</i></span></a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <span>开户人所在地区：
                <i>{{ tenantInvoice.province }}{{ tenantInvoice.city
                  }}{{ tenantInvoice.district }}{{ tenantInvoice.street }}
                </i>
              </span>
            </a-col>
            <a-col :span="8"><span>开户人详细地址： <i>{{ tenantInvoice.acceptAddr }}</i></span></a-col>
          </a-row>
        </div>
      </div>
      <!-- 公司附件 -->
      <!-- <div class="maxleftbox"
           id="top8">
        <div class="maxleft_title">
          公司附件
          <i>非常重要：提供贵司的近三年财务报告，有利于展示您的经营与发展状况</i>
          <div class="addtitle">新增附件</div>
        </div>
        <div class="maxleftbox_box">
          <div class="box_li"
               style="height: 102px"
               v-for="(item, index) in enterpriseInformationArr.tenantAttachments"
               :key="index">
            <img class="box_fujianimg"
                 :src="previewUrl + item.attachmentId"
                 alt=""
                 v-if="
                item.fileType === 'jpg' ||
                  item.fileType === 'png' ||
                  item.fileType === 'jpeg'
              " />
            <img class="box_fujianimg"
                 src="../../../assets/image/enter/wd.png"
                 alt=""
                 v-else />
            <div class="box_fujian">
              <h4>{{ item.attachmentTypeName }}</h4>
              <p style="
                  display: block;
                  word-break: keep-all;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                ">
                附件描述：{{ item.description }}
              </p>
              <p>文件到期日：{{ item.expireDate }}</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 底部 -->
      <div class="botton">
        <div class="submit-options">
          <div v-if="currentTenant.auditStatus === '0' || currentTenant.auditStatus === '3' || currentTenant.auditStatus === '4'"
               @click="referbutton">
            确认提交
          </div>
          <div v-if="currentTenant.auditStatus === '0' || currentTenant.auditStatus === '3' || currentTenant.auditStatus === '4'"
               @click="goback">
            返回修改
          </div>
          <div v-if="currentTenant.auditStatus === '1' || currentTenant.auditStatus === '2'"
               @click="back">返回</div>
        </div>
      </div>
    </div>
    <div class="max_right">
      <a-anchor :get-container="getContainer">
        <a-anchor-link href="#top1"
                       title="企业信息" />
        <a-anchor-link href="#top2"
                       title="业务信息"
                       v-if="currentType === 3" />
        <a-anchor-link href="#top3"
                       title="联系人信息" />
        <a-anchor-link href="#top4"
                       title="地址" />
        <a-anchor-link href="#top5"
                       title="银行卡信息" />
        <a-anchor-link href="#top6"
                       title="开票信息" />
        <a-anchor-link href="#top7"
                       title="财务信息" />
        <a-anchor-link href="#top8"
                       title="公司附件" />
      </a-anchor>
    </div>
  </div>
</template>
<script>
import setting from "@/settings.js";
export default {
  data () {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 11 },
      labelCol1: { span: 5 },
      wrapperCol1: { span: 16 },
      //经营范围
      relationCategoryTenants: '',
      //送货范围
      deliveries: '',
      //list
      enterpriseInformationArr: [],
      //整体list
      form: '',
      formArr: '',
      //开票信息
      tenantInvoice: "",
      // 预览地址
      previewUrl: setting.previewUrl,
    };
  },
  methods: {
    getContainer () {
      return document.getElementById('scroll-container')
    },
    //获取4s/供应商企业信息数据
    getEnterpriseInformation () {
      let url = '';
      console.log(this.currentTenant);
      if (this.currentType === 2) {
        url = this.$api.register.get4sDetail(this.currentTenant.id);
      } else {
        url = this.$api.register.getSupplierDetail(this.currentTenant.id);
      }
      this.$store.dispatch("request", url).then((res) => {
        let result = res.result;
        console.log(result);
        result.tenantInvoice = result.tenantInvoice || {}
        this.deliveries = result.deliveries || []
        this.tenantInvoice = result.tenantInvoice
        this.form = result
        console.log(this.form);
        //2 4s回显   3 供应商回显
        if (this.currentType === 2) {
          // this.form =
        } else {
          if (this.form.deliveries !== null) {
            let arr = []
            for (let i = 0; i < this.form.deliveries.length; i++) {
              arr.push(this.form.deliveries[i].provinceName)
            }
            this.deliveries = arr.toString()
          }
        }
        this.enterpriseInformationArr = result;
        if (this.enterpriseInformationArr.foundDate) {
          this.enterpriseInformationArr.foundDate = this.enterpriseInformationArr.foundDate.split(
            " "
          )[0];
        }
        if (this.enterpriseInformationArr.termStart) {
          this.enterpriseInformationArr.termStart = this.enterpriseInformationArr.termStart.split(
            " "
          )[0];
        }
        if (this.enterpriseInformationArr.termEnd) {
          this.enterpriseInformationArr.termEnd = this.enterpriseInformationArr.termEnd.split(
            " "
          )[0];
        } else {
          this.enterpriseInformationArr.termEnd = "不约定期限";
        }
      });
    },

    referbutton () {
      this.form.auditStatus = '1';
      let url = ''
      this.valuation()
      if (this.currentType === 2) {
        url = this.$api.register.get4sSubmit(this.formArr)
      } else {
        url = this.$api.register.getSaveSupplier(this.formArr)
      }
      this.$store
        .dispatch("request", url)
        .then(() => {
          this.$store.dispatch('user/toFilterUserTenants', true)
          this.$router.push("/enter/enterView/approve");
        });
    },
    //企业信息赋值
    valuation () {
      this.form.contactSaveDTOS = this.form.tenantContacts;
      this.form.addressSaveDTOS = this.form.tenantAddresses;
      this.form.bankSaveDTOS = this.form.tenantBanks;
      this.form.invoiceSaveDTO = this.form.tenantInvoice;
      this.form.attachmentSaveDTOS = this.form.tenantAttachments;
      if (this.currentType === 3) {
        this.form.categoryTenants = this.form.relationCategoryTenants
        this.form.deliverySaveDTOS = this.form.deliveries
      }
      let form = JSON.parse(JSON.stringify(this.form));
      delete form.tenantContacts
      delete form.tenantAddresses
      delete form.tenantBanks
      delete form.tenantInvoice
      delete form.tenantAttachments
      delete form.relationCategoryTenants
      delete form.deliveries
      this.formArr = form
    },
    goback () {
      this.$router.push("/enter/enterView/supplier");
    },
    back () {
      this.$router.push("/enter/enterView/approve");
    },
  },
  computed: {
    // 24s店 3供应商
    currentType () {
      return this.$store.state.settleIn.currentType;
    },
    currentTenant () {
      return this.$store.state.user.currentTenant;
    },
  },
  activated () {
    this.getEnterpriseInformation();
  },
};
</script>
<style lang="less" scoped>
.max {
  overflow: hidden;
  padding-left: 76px;
  margin-top: 40px;

  .max_left {
    width: 904px;
    float: left;

    .maxleftbox {
      margin-bottom: 17px;
    }

    .maxleftbox,
    .writMessage {
      border: 1px solid @greyBorder;

      .maxleft_title {
        height: 48px;
        background-color: @greyDeepBackground;
        font-size: 16px;
        line-height: 48px;
        padding-left: 16px;
        font-weight: 500;
        position: relative;
        color: @colorCommonFont;

        .addbutton {
          width: 100px;
          height: 32px;
          position: absolute;
          right: 16px;
          top: 8px;
          font-size: 12px;
          color: #3b82ff;
          text-align: center;
          line-height: 32px;
          background: #ffffff;
          border-radius: 2px;
          cursor: pointer;
        }

        i {
          font-size: 12px;
          color: @colorGreyFontM;
          font-weight: 400;
          font-style: normal;
        }
      }

      .maxleft_title1 {
        overflow: hidden;
        padding: 24px 25px 24px;

        span {
          font-size: 12px;
          color: @colorGreyFont;
          line-height: 30px;

          i {
            color: @colorCommonFont;
            font-style: normal;
            font-size: 12px;
          }
        }

        .title1_i {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          width: 362px;
          height: 14px;
          line-height: 19px;
        }
      }

      .invoice-info {
        padding-bottom: 0;
      }
    }

    .maxleftbox_box {
      padding: 24px;
      padding-bottom: 0;
      min-height: 150px;

      .box_li {
        width: 320px;
        height: 166px;
        border: 1px solid #e6e6e6;
        padding: 0 25px;
        display: inline-block;
        margin-right: 24px;
        margin-bottom: 24px;
        position: relative;

        .box_litop {
          height: 73px;
          padding: 17px 0;
          border-bottom: 1px solid #e6e6e6;
          position: relative;

          .box_litop_dress {
            width: 276px;
            height: 32px;
            opacity: 1;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: @colorCommonFont;
            line-height: 16px;
          }

          .box_litop_left {
            float: left;
            font-size: 14px;
            color: @colorCommonFont;

            p {
              margin-bottom: 0;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: @colorCommonFont;
            }
          }

          .box_litop_right {
            position: absolute;
            right: 0;
            top: 16px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;

            span {
              font-style: normal;
              color: #999;
              font-size: 14px;
              padding-left: 16px;
            }

            i {
              font-style: normal;
              cursor: pointer;
              color: #3b82ff;
              font-size: 14px;
              padding-left: 16px;
            }
          }
        }

        .box_bottom {
          padding: 10px 0;
          overflow: hidden;
          position: relative;

          p {
            margin-bottom: 0;
            font-size: 12px;
            line-height: 24px;
            color: @colorGreyFont;
          }

          span {
            padding-left: 5px;
          }

          .bottom_left {
            float: left;

            .addressbz {
              width: 276px;
              display: block; /*内联对象需加*/
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
            }
          }

          .bottom_right {
            float: right;
          }

          .dizhi {
            position: absolute;
            right: 5px;
            bottom: 10px;
            color: #3b82ff;
            font-size: 14px;
            cursor: pointer;

            i {
              font-style: normal;
              padding-left: 16px;
            }
          }
        }

        .box_fujianimg {
          position: absolute;
          top: 20px;
          left: 25px;
          width: 40px;
          height: 40px;
        }

        .box_fujian {
          margin: 20px 0 0 50px;

          h4 {
            margin-bottom: 9px;
          }

          p {
            font-size: 12px;
            color: @colorGreyFont;
            margin-bottom: 2px;
          }
        }

        .fujian_del {
          position: absolute;
          right: 24px;
          top: 20px;
          color: #3b82ff;
          cursor: pointer;
        }
      }
    }

    .submit-options {
      width: 360px;
      margin: 0 auto;

      div {
        display: inline-block;
        width: 172px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
      }

      div:nth-child(1) {
        background: @activeRed;
        margin-right: 16px;
        color: #fff;
      }

      div:nth-child(2) {
        background: @greyDeepBackground;
        color: @colorCommonFont;
      }
    }
  }

  .scope {
    margin-left: 62px;
    color: #333;
    font-style: normal;
    font-size: 12px;
    display: inline-block;
  }

  .uploadimg {
    font-size: 12px;
    color: #ccc;
    position: absolute;
    bottom: -30px;
  }

  .max_right {
    width: 172px;
    float: right;
  }

  .ant-upload.ant-upload-select-picture-card {
    width: 200px;
    height: 120px;
  }

  /deep/ .ant-select {
    font-size: 12px;
  }

  /deep/ .ant-select-selection--single {
    height: 28px;
  }

  /deep/ .ant-select-selection__rendered {
    line-height: 28px;
  }

  /deep/ .ant-input {
    font-size: 12px;
    color: @colorCommonFont;
  }

  /deep/ .ant-form-item-with-help {
    margin-bottom: 24px;
  }

  /deep/ .ant-form-explain {
    position: absolute;
    font-size: 12px;
  }

  /deep/ .ant-form-item-label > label {
    color: @colorGreyFont;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
  }

  /deep/ .ant-form label {
    font-size: 12px;
    color: @colorGreyFont;
  }

  /deep/ .ant-input::placeholder {
    color: #ccc;
  }

  /deep/ .ant-form-item {
    font-size: 12px;
    margin-bottom: 20px;
  }
  /deep/ .ant-col-8 {
    height: 26px;
    line-height: 26px;
  }
}
.previewUrl-id {
  > span {
    float: left;
  }
  > div {
    width: 200px;
    border: 1px solid #fff;
    margin-bottom: 6px;
    margin-right: 24px;
    transition: border-color 0.2s;
    float: left;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    > p {
      color: #666;
      font-size: 12px;
    }
    > div {
      width: 200px;
      height: 120px;
      border: 1px solid #fff;
      margin-bottom: 6px;
      margin-right: 24px;
      line-height: 120px;
      transition: border-color 0.2s;
      float: left;
      align-items: center;
      justify-content: center;
      background: #f8f8f8;
      cursor: pointer;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}

.fileoperation {
  position: absolute;
  right: 24px;
  top: 20px;

  i {
    font-size: 14px;
    color: #3b82ff;
    font-style: normal;
    cursor: pointer;
    margin-left: 16px;
  }
}
</style>
